<!DOCTYPE HTML>
<html manifest="offline/caretrack.manifest">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0 user-scalable=yes" />
<title>CareTrack Mobile App Demo</title>

<link rel="stylesheet" href="css/jquery.mobile-1.0b2.css" />
<link rel="stylesheet" href="css/googlemap-tipfont.css" />
<link rel="icon" href="images/favicon.ico" />

<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/caretrack-global.js"></script>
<script type="text/javascript" src="js/caretrack-components.js"></script>
<script type="text/javascript" src="js/caretrack-datamodel.js"></script>
<script type="text/javascript" src="js/caretrack-network.js"></script>
<script type="text/javascript" src="js/caretrack-dataloader.js"></script>
<script type="text/javascript" src="js/caretrack-pagedef.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0b2.js"></script>
<script type="text/javascript" src="js/phonegap.0.9.6.js"></script>
<script type="text/javascript" src="js/googlemap.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=en"></script>

<script>
	//$( function() {
	//	document.addEventListener("deviceready", onDeviceReady, false);
	//function onDeviceReady() {
	//Volvo.Caretrack.Utilities.checkNetwork({
	//error: function() { alert('connection error');},
	//success: function() {alert('connection ok');}
	//		});	
	//  }
	//})
</script>

<script>
	jumpTopage = function(template, page) {
		Volvo.CareTrack.Utilities.setToStorage('currentPage', page);
		window.location.href = '#' + template;
		window.location.reload();
	}
</script>

</head>
<body>

	<!-- --------------- page template definitions start ----------------- -->
	<!-- Home Page Template -->
	<section data-role="page" id="template_home" data-theme="a">

		<div data-role="header">
			<h1>no header found ...</h1>
		</div>

		<div data-role="content">
			<h1>no content found ...</h1>
		</div>

		<div data-role="footer">
			<h1>no footer found ...</h1>
		</div>

	</section>

	<div data-role="page" id="template_dialog" data-theme="a">
		<div data-role="header">
			<h1>Dialog</h1>
		</div>
		<div data-role="content">
			<div data-role="fieldcontain">
				<select id="select-restaurants" name="select-restaurants"
					data-native-menu="false" multiple="multiple">
					<optgroup label="Choose language">
						<option value="English" data-placeholder="true">English</option>
						<option value="Chinese">Chinese</option>
						<option value="Swedish">Swedish</option>
					</optgroup>
				</select>
			</div>
		</div>
	</div>

	<!-- --------------- page template definitions end ----------------- -->



	<!-- --------------- component template definitions start ----------------- -->
	<!-- Home Header Component Template -->
	<script type="text/x-caretrack-component" id="component-HomeHeader">
		<a href="javascript: jumpTopage('template_home', 'Home')" data-theme="b" data-transition="pop" data-icon="home">Home</a>
		<h3 class="ui-title" tabindex="0" role="heading" aria-level="1"/>
		<a href="javascript: jumpTopage('template_home', 'Login')" data-theme="b" data-transition="pop" data-icon="delete">Logout</a>
	</script>

	<!-- Home Footer Component Template -->
	<script type="text/x-caretrack-component" id="component-HomeFooter">
		<a href="#template_dialog" data-rel="dialog" data-theme="b" data-transition="pop" data-icon="gear">Options</a>
	</script>
	
	<!-- Home Section Component Template -->
	<script type="text/x-caretrack-component" id="component-HomeContent">
		<img src="images/caretrack.jpg" width="100%"/>
		<p>This is demo of CareTrack mobile app wirten by Grace & Jenny & Eric & Jacky & Robert & FuCheng
			
	</script>

	<!-- Home Body Component Template -->
	<script type="text/x-caretrack-component" id="component-NavBar">
		<br/>
		<nav data-role="navbar">
			<a href="javascript: jumpTopage('template_home', 'SearchMachine')" data-icon="home" data-iconpos="top">Machines</a>
			<a href="#" data-icon="gear" data-iconpos="top">Matris</a>
			<a href="#" data-icon="star" data-iconpos="top">Reports</a>
		</nav>
	</script>
	
	<!-- Header Component Template -->
	<script type="text/x-caretrack-component" id="component-Header">
		<h3 class="ui-title" tabindex="0" role="heading" aria-level="1"/>
	</script>
	
	<!-- Login Component Template -->
	<script type="text/x-caretrack-component" id="component-Login">
		<div data-role="header" data-position="inline" data-theme="e" style="display:none" id="component-Login-errormsg">
			<h3></h3>
		</div>
		<div data-role="fieldcontain">
			<label for="component-Login-username">Input username:</label>
    		<input type="text" name="component-Login-username" id="component-Login-username" value=""  />
			<label for="component-Login-password">Input password:</label>
			<input type="password" name="component-Login-password" id="component-Login-password" value=""  />
			<button type="submit" data-theme="b" id="component-Login-loginButton" data-inline="true">Login</button>
		</div>
	</script>

	<!-- Machine Search Component Template -->
	<script type="text/x-caretrack-component" id="component-SearchMachine">
		<div data-role="fieldcontain">
			<label for="component-Login-username">Search Machine by dealerID:</label>
    		<input type="search" name="component-SearchMachine-searchText" id="component-SearchMachine-searchText" value=""  />
			<button type="submit" data-theme="b" id="component-SearchMachine-searchButton" data-icon="search" data-iconpos="right" data-inline="true">Search</button>
		</div>
		<ul data-role="listview" id="component-SearchMachine-searchResultList" data-theme="a" data-split-theme="c" data-split-icon="home" data-inset="true">
		</ul>
	</script>
	
	<!-- Machine NavBar Component Template -->
	<script type="text/x-caretrack-component" id="component-MachineNavBar">
		<br/>
		<nav data-role="navbar" data-inline="true">
			<a href="javascript: jumpTopage('template_home', 'MachinePosition')" class="ui-btn-active" data-icon="home" data-iconpos="top">Machine Position</a>
			<a href="javascript: jumpTopage('template_home', 'MyPosition')" data-icon="home" data-iconpos="top">My Position</a>
			<a href="javascript: jumpTopage('template_home', 'Directions')" data-icon="home" data-iconpos="top">Directions</a>
		</nav>
	</script>
	
	<!--Machine Position Component Template -->
	<script type="text/x-caretrack-component" id="component-MachinePosition">
		<div id="component-MachinePosition-map" style="width:100%;height:100%;"/>
	</script>
	
	<!--Machine Position Component Template -->
	<script type="text/x-caretrack-component" id="component-MyPosition">
		<div id="component-MyPosition-map" style="width:100%;height:100%;"/>
	</script>
	
	<!--Map Directions Component Template -->
	<script type="text/x-caretrack-component" id="component-Directions">
		<div id="component-Directions-map" style="width:100%;height:100%;"/>
		<div id="component-Directions-panel" style="width:100%;height:100%;"></div>
	</script>
	<!-- --------------- component template definitions end ----------------- -->

</body>
</html>